<template>
  <div id="panel">
    <div :class="['popus',popuState?'act':'']">
      <i v-if="popuOption==='success'" class="iconfont icon-success_fill" style="color:#19be6b"></i>
      <i v-if="popuOption==='warn'" class="iconfont icon-prompt_fill" style="color:#ff9900"></i>
      <i v-if="popuOption==='error'" class="iconfont icon-delete_fill" style="color:#ed4014"></i>
      <span>{{info}}</span>
    </div>
    <ul class="menu">
      <form action>
        <li
          @click="designPanel=false;themePanel=!themePanel;guidePanel=false"
          :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}"
        >
          <span>切换主题</span>
        </li>
        <li :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}">
          <input id="uploadButton" type="file" @change="uploadExcel" style="display:none">
          <span @click="uploadClick">更新表单</span>
        </li>
        <li :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}">
          <span style="margin-right:10px">
            <label for="size">尺寸</label>
            <select disabled>
              <option value="900">900</option>
            </select>
          </span>
          <span>
            <label for="rate">比率</label>
            <select v-model="scale">
              <option value="1">1</option>
              <option value="1.2">1.2</option>
              <option value="1.5">1.5</option>
              <option value="2" v-if="!ban">2</option>
            </select>
          </span>
        </li>
        <li
          @click="geneImg"
          class="gene"
          :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}"
        >
          <i v-if="!geneAble"></i>
          <span>生成图片</span>
        </li>
        <li
          :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}"
          @click="themePanel=false;designPanel=false;guidePanel=!guidePanel"
        >
          <span>引导</span>
        </li>
      </form>
    </ul>
    <div :class="['themes',themePanel?'act':'']">
      <div class="theme-list">
        <li
          :style="{backgroundImage:'url('+filePath+'theme_'+index+'/banner.jpg)'}"
          @click="themeSwitch(index)"
          v-for="(item, index) in themesCloud"
          :key="index"
          :class="themeIndex===index?'act':''"
        ></li>
        <li class="theme-add" @click="setTheme" v-if="design">
          <i class="iconfont icon-jia"></i>
        </li>
      </div>
    </div>
    <div :class="['design',designPanel?'act':'']">
      <div class="modules">
        <li
          @click="uploadModuleClick(item)"
          v-for="(item, index) in designMenu.mudoles"
          :key="index"
        >
          <input
            :id="'uploadDesignModule'+item"
            type="file"
            @change="uploadModule($event,index)"
            style="display:none"
          >
          <span>{{item}}</span>
        </li>
      </div>
      <div class="colors">
        <li @click="uploadColor(index)" v-for="(item, index) in designMenu.colors" :key="index">
          <span>{{item}}</span>
        </li>
      </div>
      <div
        @click="addTheme"
        :class="['button',cloudAble?'act':'']"
        :style="{backgroundColor:'rgb('+themes[themeIndex].colors.main+')'}"
      >保存方案</div>
    </div>
    <div :class="['guide',guidePanel?'act':'']">
      <div class="guide-menu" :style="{color:'rgb('+themes[themeIndex].colors.main+')'}">
        <li>
          <a href="static/files/WLT_designGuide.zip" download="WLT_designGuide">设计规范</a>
        </li>
        <li>
          <a href="static/files/WLT_dataGuide.xlsx" download="WLT_dataGuide">表单模版</a>
        </li>
        <li :class="faceback?'act':''" @click="faceback=!faceback">
          <span>问题反馈</span>
        </li>
      </div>
    </div>
    <div class="calendarPanel" v-if="calendar.switch">
      <div class="calendar-dialog">
        <div class="calendar-dialog-mask" @click="closeByDialog"></div>
        <div class="calendar-dialog-body">
          <calendar
            :range="calendarData.range"
            :zero="calendarData.zero"
            :lunar="calendarData.lunar"
            :value="calendarData.value"
            @select="calendarData.select"
          ></calendar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import domtoimage from "dom-to-image";
import saveAs from "file-saver";
import XLSX from "xlsx";
import store from "../store.js";
import calendar from "../plugins/calendar.vue"
import COS from 'cos-js-sdk-v5'
export default {
  components: {
    calendar
  },
  data () {
    return {
      ontology: {},
      scale: 1,
      gened: false,
      imgData: "",
      imgFormat: "png",
      listData: {},
      geneAble: true,
      info: "更新表单成功",
      popuState: false,
      popuOption: "success",
      vh: 0,
      ban: false,
      themePanel: false,
      designPanel: false,
      guidePanel: false,
      designMenu: {
        mudoles: ["Banner", "Title", "Footer", "colors"],
        colors: ["main", "light", "bold", "heavy"]
      },
      faceback: false,
      navigatorLab: 0,
      colorPlan: [],
      calendarData: {
        display: "2019/01/01 ~ 2019/01/31",
        show: false,
        range: true,
        zero: true,
        value: [[2019, 1, 1], [2019, 1, 31]], //默认日期
        lunar: true, //显示农历
        select: (begin, end) => {
          console.log(begin, end)
          store.commit("upload", {
            prope: "calendar", data: {
              switch: false,
              begin: begin,
              end: end
            }          });
          this.calendarData.show = false;
          this.calendarData.value = [begin, end];
          this.calendarData.display = begin.join("/") + " ~ " + end.join("/");
        }
      },
      fileCloudPath: '',
      fileCloudList: [0, 1, 2, 3],
      cloudAble: false
    };
  },
  computed: {
    themes: {
      get () {
        return store.state.themes;
      },
      set () { }
    },
    themeIndex: {
      get () {
        return store.state.themeIndex;
      },
      set () { }
    },
    calendar: {
      get () {
        return store.state.calendar;
      },
      set () { }
    },
    build: {
      get () {
        return store.state.build
      },
      set () { }
    },
    design: {
      get () {
        return store.state.design
      },
      set () { }
    },
    themesCloud: {
      get () {
        return store.state.themesCloud
      },
      set () { }
    },
    themeColors: {
      get () {
        return store.state.themeColors
      },
      set () { }
    },
    filePath: {
      get () {
        return store.state.filePath
      },
      set () { }
    }
  },
  methods: {
    init () {
      this.readLocalStorage()
      this.ontology = document.getElementById("ontologyInner");
      this.excelInit();
      this.vh = document.body.clientHeight;
      this.deviceTest();
      this.fileInit()
    },
    D2I (ontology, scale) {
      const width = ontology.offsetWidth * scale;
      const height = ontology.offsetHeight * scale;
      let config = {
        style: {
          transform: `scale(${scale})`,
          "transform-origin": "top left"
        },
        quality: 1,
        width,
        height
      };
      // this.toPng(ontology, config)
      // this.toJpeg(ontology, config)
      this.toBlob(ontology, config);
    },
    toPng (ontology, config) {
      domtoimage.toPng(ontology, config).then(data => {
        if (data) {
          console.log(data);
          this.imgData = data;
          this.gened = true;
        }
      });
    },
    toJpeg (ontology, config) {
      domtoimage.toJpeg(ontology, config).then(data => {
        if (data) {
          console.log(data);
          this.gened = true;
          this.imgData = data;
          this.imgFormat = "jpeg";
        }
      });
    },
    toBlob (ontology, config) {
      domtoimage.toBlob(ontology, config).then(blob => {
        window.saveAs(blob, "WLT_list.png");
      });
    },
    geneImg () {
      if (this.navigatorLab != 2) {
        if (this.geneAble) {
          this.D2I(this.ontology, this.scale);
          this.geneAble = false;
          if (this.navigatorLab === 0) this.popus("正在渲染图片", "success", 5000);
          if (this.navigatorLab === 1) this.popus("正在渲染，当前环境无法保证图片质量，建议更换 Chrome", "warn", 5000);
          setTimeout(() => {
            this.geneAble = true;
          }, 5000);
        }
      } else {
        this.popus(
          "当前环境安全协议不允许渲染 请更换 Chrome",
          "error",
          5000
        );
      }
    },
    excelInit () {
      // let workbook = XLSX.readFile('https://test-1257187612.cos.ap-shanghai.myqcloud.com/originData.xlsx')
    },
    uploadExcel (e) {
      if (e.target.files) {
        let reader = new FileReader();
        let fileData;
        reader.onload = e => {
          fileData = XLSX.read(e.target.result, {
            type: "binary"
          });
          this.upladJudge(
            XLSX.utils.sheet_to_json(fileData.Sheets[fileData.SheetNames[0]])
          );
        };
        reader.readAsBinaryString(e.target.files[0]);
      } else {
        return;
      }
    },
    upladJudge (e) {
      if (e[0].name && e[0].rate && e[0].tickets) {
        let json = { data: e }
        this.writeLocalStorage(JSON.stringify(json))
        if (e.length > 300) {
          this.ban = true;
          this.popus("更新成功 当前列表过长，已禁用最大比率", "warn", 5000);
        } else {
          this.popus();
        }
        console.log("dataFormat is right", e);
      } else {
        this.popus("表单的格式不符合要求", "error");
      }
    },
    uploadClick () {
      document.getElementById("uploadButton").click();
    },
    popus (info, option, during) {
      this.info = info || "数据更新成功";
      this.popuOption = option || "success";
      this.popuState = true;
      setTimeout(() => {
        this.popuState = false;
      }, during || 2000);
    },
    themeSwitch (e) {
      store.commit("upload", { prope: "themeIndex", data: e });
      this.initColors()
    },
    setTheme () {
      this.themePanel = false
      this.designPanel = !this.designPanel
      this.guidePanel = false
      // let doms = document.querySelectorAll('.colors li')
      // for (let index = 0; index < doms.length; index++) {
      //   const element = doms[index];
      //   element.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
      // }
    },
    addTheme () {
      // this.popus("暂未开放", "warn", 3000);
      // this.fileControl()
      console.log(this.fileCloudList)
      if (this.fileCloudListCheck()) {
        let addThemeConfirm = confirm('您没有删除／修改权限，请在设计确认后保存，是否确认保存？')
        if (addThemeConfirm) {
          for (let index = 0; index < this.fileCloudList.length; index++) {
            const target = this.fileCloudList[index]
            let name = 'banner'
            if (index === 1) name = 'title'
            if (index === 2) name = 'footer'
            if (index === 3) name = 'colors'
            this.fileSave(target, name, this.themesCloud.length, index)
          }
        }
      } else {
        alert('主题模块不完整')
      }
    },
    uploadModuleClick (e) {
      document.getElementById("uploadDesignModule" + e).click();
    },
    uploadModule (e, index) {
      console.log(index);
      let cloudTarget = e.target.files[0]
      let reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = e => {
        let format = e.target.result.split(";")[0].split(":")[1];
        if (format.match("png") || format.match("jpeg")) {
          let img = new Image();
          img.src = e.target.result;
          img.onload = () => {
            console.log(index, img.height, img.width);
            if (index === 0) {
              if (img.height < 200 || img.width < 700) {
                alert("与标准尺寸严重不符");
              } else if (!format.match("jpeg")) {
                alert("该模块必须是JPG格式")
              } else {
                document.querySelector(".banner .poster img").src =
                  e.target.result;
                document.querySelector(
                  ".modules li:nth-child(1)"
                ).style.backgroundImage =
                  "url(" + e.target.result + ")";
                this.fileCloudList[0] = cloudTarget
              }
            }
            if (index === 1) {
              if (img.height < 100 || img.height > 300 || img.width < 500) {
                alert("与标准尺寸严重不符");
              } else if (!format.match("png")) {
                alert("该模块必须是Png格式")
              } else {
                // console.log(document.querySelectorAll('.form-tit i')[0].style)
                document.querySelector(
                  ".modules li:nth-child(2)"
                ).style.backgroundImage =
                  "url(" + e.target.result + ")";
                let domList1 = document.querySelectorAll(".form-tit i");
                let domList2 = document.querySelectorAll(".form-tit");
                for (let index = 0; index < domList1.length; index++) {
                  const element = domList1[index];
                  element.style.backgroundImage =
                    "url(" + e.target.result + ")";
                }
                for (let index = 0; index < domList2.length; index++) {
                  const element = domList2[index];
                  element.style.backgroundImage =
                    "url(" + e.target.result + ")";
                }
                this.fileCloudList[1] = cloudTarget
              }
            }
            if (index === 2) {
              if (img.height < 1000 || img.width < 1000) {
                alert("与标准尺寸严重不符");
              } else if (!format.match("jpeg")) {
                alert("该模块必须是JPG格式")
              } else {
                document.querySelector("footer").style.backgroundImage =
                  "url(" + e.target.result + ")";
                document.querySelector(
                  ".modules li:nth-child(3)"
                ).style.backgroundImage =
                  "url(" + e.target.result + ")";
                this.fileCloudList[2] = cloudTarget

              }
            }
            if (index === 3) {
              if (img.height != 130 || img.width != 550) {
                alert("非标准色卡")
              } else {
                console.log('colors')
                document.querySelector(".modules li:nth-child(4)").style.backgroundImage = "url(" + e.target.result + ")";
                this.cvsAnalysis(img)
                this.fileCloudList[3] = cloudTarget
              }
            }
          };
        } else {
          alert("格式错误");
        }
        console.log(format);
      };
    },
    cvsAnalysis (img) {
      let cvs = document.createElement('canvas')
      cvs.id = 'cvs'
      cvs.style.display = 'none'
      document.body.appendChild(cvs)
      setTimeout(() => {
        document.body.removeChild(cvs)
      }, 300);
      let ctx = cvs.getContext('2d')
      cvs.height = img.height
      cvs.width = img.width
      ctx.drawImage(img, 0, 0)
      for (let index = 0; index < 4; index++) {
        let position = 50 + 150 * index
        let color = ctx.getImageData(position, 50, 1, 1).data.toString().split(',255')[0]
        this.setColors(index, color)
      }
    },
    uploadColor (index) {
      let color = prompt("输入RGB或Hex色值(237,48,69/#bd1b28)");
      // if (color[3] != ',' || color[7] != ',' || color.split(',')[0] > 256 || color.split(',')[0] > 256 || color.split(',')[0] > 256) {
      if (!color.match(/,/) && color.length < 8) {
        color = this.hex2rgb(color);
      }
      if (
        color.split(",").length != 3 ||
        color.split(",")[0] > 255 ||
        color.split(",")[1] > 255 ||
        color.split(",")[2] > 255
      ) {
        alert("格式错误");
      } else {
        this.setColors(index, color)
      }
    },
    setColors (index, color) {
      if (index === 0) {
        this.uploadColorMain(color)
        store.commit("upload", { prope: "themeColors.main", data: color })
      }
      if (index === 1) {
        this.uploadColorLight(color)
        store.commit("upload", { prope: "themeColors.light", data: color })
      }
      if (index === 2) {
        this.uploadColorBold(color)
        store.commit("upload", { prope: "themeColors.bold", data: color })
      }
      if (index === 3) {
        this.uploadColorHeavy(color)
        store.commit("upload", { prope: "themeColors.heavy", data: color })
      }
    },
    uploadColorMain (color) {
      document.querySelector(
        ".colors li:nth-child(1)"
      ).style.backgroundColor =
        "rgb(" + color + ")";
      this.themes[this.themeIndex].colors.main = color;
      let dom1 = document.querySelectorAll("#form_0_0 .item");
      this.evenColor(dom1, 3, color, 0);
      let dom2 = document.querySelectorAll("#form_1_0 .item");
      this.evenColor(dom2, 3, color, 0);
      let dom3 = document.querySelectorAll("#form_1_1 .item");
      this.evenColor(dom3, 3, color, 0);
      let dom4 = document.querySelectorAll("#form_1_2 .item");
      if (dom4) this.evenColor(dom4, 3, color, 0);
    },
    uploadColorLight (color) {
      document.querySelector(
        ".colors li:nth-child(2)"
      ).style.backgroundColor =
        "rgb(" + color + ")";
      this.themes[this.themeIndex].colors.light = color;
    },
    uploadColorBold (color) {
      document.querySelector(
        ".colors li:nth-child(3)"
      ).style.backgroundColor =
        "rgb(" + color + ")";
      this.themes[this.themeIndex].colors.bold = color;
      let dom1 = document.querySelectorAll("#form_0_0 .item");
      this.evenColor(dom1, 3, color, 1);
      let dom2 = document.querySelectorAll("#form_1_0 .item");
      this.evenColor(dom2, 3, color, 1);
      let dom3 = document.querySelectorAll("#form_1_1 .item");
      this.evenColor(dom3, 3, color, 1);
      let dom4 = document.querySelectorAll("#form_1_2 .item");
      if (dom4) this.evenColor(dom4, 3, color, 1);
    },
    uploadColorHeavy (color) {
      document.querySelector(
        ".colors li:nth-child(4)"
      ).style.backgroundColor =
        "rgb(" + color + ")";
      this.themes[this.themeIndex].colors.heavy = color;
    },
    evenColor (dom, colum, color, index) {
      if (index === 0) {
        if (((dom.length + (colum - (dom.length % colum))) / colum) % 2 === 0) {
          for (let i = 0; i < dom.length % colum; i++) {
            dom[dom.length - 1 - i].style.background = "rgb(" + color + ")";
          }
        }
        for (let index = 0; index < dom.length; index++) {
          if ((index + 1) % colum === 0 && ((index + 1) / colum) % 2 === 0) {
            for (let i = 0; i < colum; i++) {
              dom[index - i].style.background = "rgb(" + color + ")";
            }
          }
        }
      } else {
        if (((dom.length + (colum - (dom.length % colum))) / colum) % 2 === 0) {
          for (let i = 0; i < dom.length % colum; i++) {
            dom[dom.length - 1 - i].style.borderRightColor =
              "rgb(" + color + ")";
          }
        }
        for (let index = 0; index < dom.length; index++) {
          if ((index + 1) % colum === 0 && ((index + 1) / colum) % 2 === 0) {
            for (let i = 0; i < colum; i++) {
              dom[index - i].style.borderRightColor = "rgb(" + color + ")";
            }
          }
        }
      }
    },
    deviceTest () {
      let info = window.navigator.userAgent;
      if (info.match("Chrome")) {
        console.log("render env good");
      } else if (info.match("Firefox")) {
        this.navigatorLab = 1
      } else {
        this.navigatorLab = 2
      }

    },
    hex2rgb (hex) {
      hex = hex.replace(/#/, "");
      if (hex.length === 1) {
        hex = "#00000" + hex;
      }
      if (hex.length === 2) {
        hex = "#0000" + hex;
      }
      if (hex.length === 3) {
        hex = "#" + hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
      }
      if (hex.length === 4) {
        hex = "#00" + hex;
      }
      if (hex.length === 5) {
        hex = "#0" + hex;
      }
      if (hex.length === 6) {
        hex = "#" + hex;
      }
      return (
        parseInt("0x" + hex.slice(1, 3)) +
        "," +
        parseInt("0x" + hex.slice(3, 5)) +
        "," +
        parseInt("0x" + hex.slice(5, 7))
      );
    },
    initColors () {
      // init image
      let img = new Image()
      img.crossOrigin = 'anonymous'
      img.src = this.filePath + this.themesCloud[this.themeIndex] + '/colors.png'
      // init canvas
      let cvs = document.createElement('canvas')
      cvs.id = 'cvss'
      cvs.style.display = 'none'
      let ctx = cvs.getContext('2d')
      img.onload = () => {
        document.body.appendChild(cvs)
        setTimeout(() => {
          document.body.removeChild(cvs)
        }, 300)
        cvs.height = img.height
        cvs.width = img.width
        ctx.drawImage(img, 0, 0)
        for (let i = 0; i < 4; i++) {
          let color = ctx.getImageData((50 + 150 * i), 50, 1, 1).data.toString().split(',255')[0]
          this.setColors(i, color)
        }
      }
    },
    closeByDialog () {
      console.log('xixi')
      store.commit("upload", { prope: "calendar.switch", data: false });
    },
    openByDialog () {
      this.calendarData.show = true;
    },
    fileInit () {
      console.log('tecent cloud init')
      this.cos = new COS({
        SecretId: 'AKIDPoO4JejOzKPM4iheaYMBl6BzZqCJmqCb',
        SecretKey: '9GVVH403rSiEVdbUDdniY9anlz9ankcd'
      })
      this.cos.getBucket({
        Bucket: 'want-list-1257187612',
        Region: 'ap-shanghai',
        Prefix: '',
      }, (err, data) => {
        store.commit("upload", { prope: "loadState", data: true })
        if (data) {
          // console.log('data from Cloud')
          // this.popus("成功链接云端数据", "success", 3000);
          // this.cloudAble = true
          // let result = data.Contents
          // let themesBox = []
          // for (let index = 0; index < result.length; index++) {
          //   const element = result[index].Key.split('/')[0];
          //   if (index < 1) {
          //     themesBox.push(element)
          //   } else if (element != result[index - 1].Key.split('/')[0]) {
          //     themesBox.push(element)
          //   }
          // }
          // store.commit("upload", { prope: "themesCloud", data: themesBox })
          // this.cos.getObjectUrl({
          //   Bucket: 'want-list-1257187612',
          //   Region: 'ap-shanghai',
          //   Key: 'theme_1/banner.png',
          //   Sign: false
          // }, (err, data) => {
          //   if (data) store.commit("upload", { prope: "filePath", data: data.Url.split('theme')[0] })
          // });
        } else {
          this.popus("无法链接云端，使用本地数据", "warn", 3000);
          console.log('data from locationBase')
        }
        store.commit("upload", { prope: "themeIndex", data: this.themesCloud.length - 1 });
        this.initColors()
      });
    },
    fileControl () {
      console.log('tecent cloud open')
      let cos = new COS({
        SecretId: 'AKIDPoO4JejOzKPM4iheaYMBl6BzZqCJmqCb',
        SecretKey: '9GVVH403rSiEVdbUDdniY9anlz9ankcd'
      })
      // this.fileSave(cos)
      this.fileReadBucket(cos)
    },
    fileSave (target, name, path, index) {
      this.cos.putObject({
        Bucket: 'want-list-1257187612',
        Region: 'ap-shanghai',
        Key: 'theme_' + path + '/' + name + '.' + target.name.split('.')[1],
        StorageClass: 'STANDARD',
        Body: target,
        onProgress: function (progressData) {
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        console.log(err || data)
        if (data && index === 3) {
          this.popus("上传成功", "success", 3000)
          this.fileInit()
          this.designPanel = false
          this.themePanel = true
        }
      })
    },
    fileCloudListCheck () {
      for (let i = 0; i < this.fileCloudList.length; i++) {
        if (!this.fileCloudList[i].type) return false
      }
      return true
    },
    readLocalStorage () {
      if (localStorage.getItem('wantListData')) {
        let data = JSON.parse(localStorage.getItem('wantListData'))
        store.commit("upload", { prope: "allListData", data: data.data });
        console.log('data from localStorage')
      }
    },
    writeLocalStorage (e) {
      JSON.stringify(e)
      localStorage.setItem('wantListData', e)
      window.location.reload()
    }
  },
  mounted () {
    this.init()
  }
};
</script>
<style lang='stylus' scoped>
@import '../assets/style/index.styl'
#panel {
  color #fff
  -moz-user-select none
  -khtml-user-select none
  user-select none
  .popus {
    position fixed
    top -50px
    color #000
    left 50%
    transform translateX(-50%)
    background #fff
    padding 10px 50px
    border-radius 3px
    font-size 14px
    transition 0.3s ease
    opacity 0
    z-index 999
    &.act {
      opacity 1
      transform translateX(-50%) translateY(80px)
    }
    i {
      color popu_success
      margin-right 5px
      font-size 16px
      position absolute
      left 30px
      top 50%
      transform translateY(-50%)
    }
    span {
      white-space nowrap
    }
  }
  .menu {
    z-index 999
    width 100%
    min-width 900px
    background #fff
    display block
    padding 25px 15px
    border-top 1px solid rgba(0, 0, 0, 0.07)
    position fixed
    bottom 0
    &:before {
      content ''
      position absolute
      display block
      top 0
      bottom 0
      left 0
      right 0
      background-image url('http://thepatternlibrary.com/img/aq.jpg')
      background-color mainC
      z-index 0
      opacity 0.15
    }
    form {
      position relative
      z-index 1
      li {
        cursor pointer
        display inline-block
        margin 0 gp1
        font-size 12px
        background mainC
        padding 10px 15px
        border-radius 3px
        cursor pointer
        // box-shadow 1px 1px 3px rgba(0, 0, 0, 0.3)
        transition 0.3s ease
        opacity 0.9
        &:hover {
          transform scale(1.02)
          transform-origin center center
          opacity 1
        }
        label {
          margin-right 5px
        }
        &.gene {
          position relative
          i {
            transition 0.7s ease
            top 0%
            bottom 0
            left 0
            right 0
            background #fff
            position absolute
            border-radius 3px
            opacity 0.5
          }
        }
      }
    }
  }
  .themes {
    background rgba(0, 0, 0, 0.3)
    position fixed
    width 100%
    min-width 900px
    left 0
    bottom 90px
    z-index 99
    transform translateY(100%)
    transition 0.3s ease
    opacity 0
    &.act {
      opacity 1
      transform translateY(0)
    }
    .theme-list {
      padding 15px
      li {
        transition 0.3s ease
        display inline-block
        height 100px
        width 150px
        background #fff
        margin-right 0
        cursor pointer
        background-size cover
        background-repeat no repeat
        background-position center
        border-radius 3px
        opacity 0.9
        transform-origin center center
        transform scale(0.85)
        &:hover {
          transform scale(0.88)
          opacity 1
        }
        &.act {
          transform scale(1)
        }
        &:last-child {
          margin-right 0
        }
        &.theme-add {
          position relative
          opacity 0.5
          background #000
          i {
            position absolute
            color #fff
            top 50%
            left 50%
            transform translate(-50%, -50%)
            font-size 36px
            opacity 0.8
          }
        }
      }
    }
  }
  .design {
    background rgba(0, 0, 0, 0.3)
    position fixed
    width 100%
    min-width 900px
    left 0
    bottom 90px
    z-index 100
    transform translateY(100%)
    transition 0.3s ease
    opacity 0
    padding 15px
    font-size 14px
    &.act {
      opacity 1
      transform translateY(0)
    }
    .modules {
      display inline-block
      float left
      li {
        background rgba(0, 0, 0, 0.6)
        color #fff
        height 70px
        width 90px
        border-radius 3px
        display inline-block
        margin-right 15px
        position relative
        cursor pointer
        overflow hidden
        background-size contain
        background-repeat no-repeat
        background-position center
        &:before {
          content '点击上传'
          display inline-block
          position absolute
          top 0
          left 0
          right 0
          bottom 0
          background #000
          transition 0.3s ease
          z-index 3
          text-align center
          line-height 80px
          opacity 0
          font-size 14px
        }
        &:hover:before {
          opacity 1
        }
        &:last-child {
          margin-right 0
        }
        span {
          position absolute
          top 50%
          left 50%
          transform translate(-50%, -50%)
        }
      }
    }
    .colors {
      display inline-block
      float left
      margin-left 25px
      li {
        display inline-block
        height 70px
        line-height 70px
        width 70px
        border-radius 50%
        margin-right 15px
        text-align center
        background rgba(0, 0, 0, 0.6)
        color #fff
        cursor pointer
      }
    }
    .button {
      display inline-block
      padding 10px 15px
      border-radius 3px
      font-size 12px
      position absolute
      top 50%
      transform translateY(-50%)
      right 50px
      cursor pointer
      display none
      &.act {
        display inline-block
      }
    }
  }
  .guide {
    background rgba(0, 0, 0, 0.3)
    position fixed
    width 100%
    min-width 900px
    left 0
    bottom 90px
    z-index 100
    transform translateY(100%)
    transition 0.3s ease
    opacity 0
    &.act {
      opacity 1
      transform translateY(0)
    }
    .guide-menu {
      padding 15px
      li {
        transition 0.3s ease
        display inline-block
        height 60px
        line-height 60px
        text-align center
        font-size 14px
        width 150px
        color rgba(255, 255, 255, 0.7)
        background rgba(0, 0, 0, 0.6)
        margin-right 15px
        cursor pointer
        border-radius 3px
        background-size contain
        background-repeat no-repeat
        background-position center
        &:hover {
          transform scale(1.02)
          transform-origin center center
          opacity 1
        }
        &:last-child {
          margin-right 0
          span {
            opacity 1
          }
          &.act {
            span {
              opacity 0
            }
            height 150px
            background-image url('../assets/images/wechat.jpeg')
            background-size contain
            background-repeat no-repeat
            background-position center
          }
        }
        & a {
          text-decoration none
        }
      }
    }
  }
  .calendarPanel {
    background #fff
    padding 25px
    position fixed
    top 50%
    left 50%
    transform translate(-50%, -50%)
    z-index 999
    border-radius 3px
    &:before, &:after {
      content ''
      display inline-block
      position absolute
      top 0
      left 0
      bottom 0
      right 0
      background #fff
      z-index 1
      border-radius 3px
    }
    &:after {
      background rgba(0, 0, 0, 0.5)
      filter blur(10px)
      transform scaleX(0.92) scaleY(0.95)
      transform-origin center bottom
      z-index 0
    }
    & .calendar-dialog {
      position relative
      z-index 3
    }
  }
}
</style>
